<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用户注册</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">

    <!-- Tailwind配置 -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#3B82F6',
                        secondary: '#6366F1',
                        accent: '#8B5CF6',
                        neutral: '#F3F4F6',
                    },
                    fontFamily: {
                        inter: ['Inter', 'sans-serif'],
                    },
                }
            }
        }
    </script>

    <!-- 自定义工具类 -->
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .bg-gradient-blue {
                background: linear-gradient(135deg, #3B82F6 0%, #8B5CF6 100%);
            }
            .text-shadow {
                text-shadow: 0 2px 4px rgba(0,0,0,0.1);
            }
            .input-focus {
                @apply focus:ring-2 focus:ring-primary/50 focus:border-primary transition duration-200;
            }
        }
    </style>
</head>
<body class="font-inter bg-gradient-blue min-h-screen flex items-center justify-center p-4">
<div class="w-full max-w-md">
    <!-- 卡片容器 -->
    <div class="bg-white rounded-xl shadow-xl overflow-hidden transition-all duration-300 hover:shadow-2xl">
        <!-- 顶部装饰条 -->
        <div class="h-2 bg-gradient-to-r from-primary to-accent"></div>

        <!-- 表单头部 -->
        <div class="p-6 text-center">
            <h2 class="text-2xl font-bold text-gray-800 mb-2">创建账户</h2>
            <p class="text-gray-500 text-sm">填写以下信息注册新账号</p>
        </div>

        <!-- 错误消息 -->
        <div id="error-message" class="px-6 py-3 bg-red-50 text-red-600 text-sm text-center hidden"></div>

        <!-- 表单主体 -->
        <form id="register-form" class="p-6 space-y-4">
            <!-- 用户名 -->
            <div class="space-y-2">
                <label for="account" class="block text-sm font-medium text-gray-700">用户名</label>
                <div class="relative">
                        <span class="absolute inset-y-0 left-0 flex items-center pl-3 text-gray-400">
                            <i class="fa fa-user"></i>
                        </span>
                    <input type="text" id="account" placeholder="请输入用户名" required
                           class="w-full pl-10 pr-4 py-2 border border-gray-300 rounded-lg input-focus">
                </div>
            </div>

            <!-- 密码 -->
            <div class="space-y-2">
                <label for="password" class="block text-sm font-medium text-gray-700">密码</label>
                <div class="relative">
                        <span class="absolute inset-y-0 left-0 flex items-center pl-3 text-gray-400">
                            <i class="fa fa-lock"></i>
                        </span>
                    <input type="password" id="password" placeholder="请输入密码" required
                           class="w-full pl-10 pr-4 py-2 border border-gray-300 rounded-lg input-focus">
                </div>
            </div>

            <!-- 确认密码 -->
            <div class="space-y-2">
                <label for="confirmPassword" class="block text-sm font-medium text-gray-700">确认密码</label>
                <div class="relative">
                        <span class="absolute inset-y-0 left-0 flex items-center pl-3 text-gray-400">
                            <i class="fa fa-lock"></i>
                        </span>
                    <input type="password" id="confirmPassword" placeholder="请再次输入密码" required
                           class="w-full pl-10 pr-4 py-2 border border-gray-300 rounded-lg input-focus">
                </div>
            </div>

            <!-- 姓名 -->
            <div class="space-y-2">
                <label for="name" class="block text-sm font-medium text-gray-700">姓名</label>
                <div class="relative">
                        <span class="absolute inset-y-0 left-0 flex items-center pl-3 text-gray-400">
                            <i class="fa fa-id-card"></i>
                        </span>
                    <input type="text" id="name" placeholder="请输入真实姓名" required
                           class="w-full pl-10 pr-4 py-2 border border-gray-300 rounded-lg input-focus">
                </div>
            </div>

            <!-- 年龄 -->
            <div class="space-y-2">
                <label for="age" class="block text-sm font-medium text-gray-700">年龄</label>
                <div class="relative">
                        <span class="absolute inset-y-0 left-0 flex items-center pl-3 text-gray-400">
                            <i class="fa fa-calendar"></i>
                        </span>
                    <input type="number" id="age" placeholder="请输入年龄" min="0" max="120"
                           class="w-full pl-10 pr-4 py-2 border border-gray-300 rounded-lg input-focus">
                </div>
            </div>

            <!-- 手机号 -->
            <div class="space-y-2">
                <label for="phone" class="block text-sm font-medium text-gray-700">手机号</label>
                <div class="relative">
                        <span class="absolute inset-y-0 left-0 flex items-center pl-3 text-gray-400">
                            <i class="fa fa-phone"></i>
                        </span>
                    <input type="tel" id="phone" placeholder="请输入手机号"
                           class="w-full pl-10 pr-4 py-2 border border-gray-300 rounded-lg input-focus">
                </div>
            </div>

            <!-- 邮箱 -->
            <div class="space-y-2">
                <label for="email" class="block text-sm font-medium text-gray-700">邮箱</label>
                <div class="relative">
                        <span class="absolute inset-y-0 left-0 flex items-center pl-3 text-gray-400">
                            <i class="fa fa-envelope"></i>
                        </span>
                    <input type="email" id="email" placeholder="请输入邮箱"
                           class="w-full pl-10 pr-4 py-2 border border-gray-300 rounded-lg input-focus">
                </div>
            </div>

            <!-- 性别（单行布局） -->
            <div class="space-y-2">
                <label class="block text-sm font-medium text-gray-700">性别</label>
                <div class="flex space-x-4">
                    <label class="flex items-center cursor-pointer">
                        <input type="radio" name="sex" value="1" id="male" class="sr-only peer" checked>
                        <div class="w-5 h-5 border border-gray-300 rounded-full flex items-center justify-center peer-checked:border-primary peer-checked:bg-primary transition-colors">
                            <div class="w-3 h-3 rounded-full bg-white scale-0 peer-checked:scale-100 transition-transform"></div>
                        </div>
                        <span class="ml-2 text-gray-700">男</span>
                    </label>
                    <label class="flex items-center cursor-pointer">
                        <input type="radio" name="sex" value="0" id="female" class="sr-only peer">
                        <div class="w-5 h-5 border border-gray-300 rounded-full flex items-center justify-center peer-checked:border-primary peer-checked:bg-primary transition-colors">
                            <div class="w-3 h-3 rounded-full bg-white scale-0 peer-checked:scale-100 transition-transform"></div>
                        </div>
                        <span class="ml-2 text-gray-700">女</span>
                    </label>
                </div>
            </div>

            <!-- 安全问题 -->
            <div class="space-y-2">
                <label for="question" class="block text-sm font-medium text-gray-700">安全问题</label>
                <div class="relative">
                        <span class="absolute inset-y-0 left-0 flex items-center pl-3 text-gray-400">
                            <i class="fa fa-question-circle"></i>
                        </span>
                    <input type="text" id="question" placeholder="请输入安全问题"
                           class="w-full pl-10 pr-4 py-2 border border-gray-300 rounded-lg input-focus">
                </div>
            </div>

            <!-- 安全答案 -->
            <div class="space-y-2">
                <label for="asw" class="block text-sm font-medium text-gray-700">安全答案</label>
                <div class="relative">
                        <span class="absolute inset-y-0 left-0 flex items-center pl-3 text-gray-400">
                            <i class="fa fa-key"></i>
                        </span>
                    <input type="text" id="asw" placeholder="请输入安全答案"
                           class="w-full pl-10 pr-4 py-2 border border-gray-300 rounded-lg input-focus">
                </div>
            </div>

            <!-- 注册按钮 -->
            <button type="submit" id="register-btn"
                    class="w-full py-3 bg-gradient-to-r from-primary to-secondary text-white font-medium rounded-lg transition-all duration-300 hover:shadow-lg hover:shadow-primary/20 focus:outline-none focus:ring-2 focus:ring-primary/50 focus:ring-offset-2">
                <i class="fa fa-user-plus mr-2"></i>立即注册
            </button>

            <!-- 底部链接 -->
            <div class="text-center text-sm text-gray-500 mt-4">
                已有账号？ <a href="login.html" class="text-primary hover:underline transition-colors">立即登录</a>
            </div>
        </form>
    </div>

    <!-- 页脚信息 -->
    <div class="text-center text-white/80 text-xs mt-6">
        © 2025 版权所有
    </div>
</div>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        const form = document.getElementById('register-form');
        const errorMessage = document.getElementById('error-message');

        form.addEventListener('submit', async function(e) {
            e.preventDefault();
            errorMessage.classList.add('hidden');

            try {
                // 收集表单数据
                const formData = {
                    account: document.getElementById('account').value.trim(),
                    password: document.getElementById('password').value.trim(),
                    confirmPassword: document.getElementById('confirmPassword').value.trim(),
                    name: document.getElementById('name').value.trim(),
                    age: document.getElementById('age').value ? parseInt(document.getElementById('age').value) : null,
                    phone: document.getElementById('phone').value.trim(),
                    email: document.getElementById('email').value.trim(),
                    sex: document.querySelector('input[name="sex"]:checked').value,
                    question: document.getElementById('question').value.trim(),
                    asw: document.getElementById('asw').value.trim()
                };

                // 前端基础校验
                if (formData.password !== formData.confirmPassword) {
                    showError('两次输入的密码不一致');
                    return;
                }

                // 禁用按钮防止重复提交
                const registerBtn = document.getElementById('register-btn');
                registerBtn.disabled = true;
                registerBtn.innerHTML = '<i class="fa fa-spinner fa-spin mr-2"></i>注册中...';

                // 发送请求
                const response = await fetch('http://localhost:8080/api/user/register', {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify(formData)
                });

                const result = await response.json();

                if (result.code === 200) {
                    alert('注册成功！即将跳转到登录页面');
                    window.location.href = 'login.html';
                } else {
                    showError(result.message || '注册失败，请重试');
                }
            } catch (error) {
                console.error('请求出错:', error);
                showError('网络请求出错，请稍后重试');
            } finally {
                // 恢复按钮状态
                const registerBtn = document.getElementById('register-btn');
                registerBtn.disabled = false;
                registerBtn.innerHTML = '<i class="fa fa-user-plus mr-2"></i>立即注册';
            }
        });

        function showError(message) {
            errorMessage.textContent = message;
            errorMessage.classList.remove('hidden');
            errorMessage.classList.add('animate-fadeIn');
        }
    });
</script>
</body>
</html>